
body{
    width: 100%;
    height: 100%;
}
.map{
    width: 1210px;
    height:1100px;
    margin: auto auto;

background-image:url(img/map.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size:100%;



}
.克拉玛依{
    float: left;
    font-size: 20px;
    color: #fff;
    margin-top:360px;
    margin-left:310px;
    /*background-color: pink;*/

}
.dian{
    position: relative;
    width:10px;
    height:10px;
    border-radius:5px;
    background-color: dodgerblue;
    float: left;
    margin-top:367px;
    margin-left:-45px;
}
.d1{
    position: absolute;
    width:10px;
    height:10px;
    float: left;
    /*margin-top:367px;*/
    /*border-radius:5px;*/
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /*margin-left:-45px;*/
    box-shadow: 0 0 12px #009dfd;
    animation: pulse 1.2s linear infinite;
}
@keyframes pulse {
    0% {}
    70% {
        /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
        width: 40px;
        height: 40px;
        opacity: 1;
    }
    100% {
        width: 70px;
        height: 70px;
        opacity: 0;
    }
}


.d2 {
    position: absolute;
    width:10px;
    height:10px;
    float: left;
    /*margin-top:367px;*/
    /*border-radius:5px;*/
    border-radius: 50%;
    transform: translate(-50%, -50%);
    /*margin-left:-45px;*/
    box-shadow: 0 0 12px #009dfd;
    animation: pulse 1.2s linear infinite;
    animation-delay: 0.4s;
}

.d3 {
    position: absolute;
    /*绝对定位*/
    width:10px;
    height:10px;
    float: left;
    /*浮动！*/
    /*margin-top:367px;*/
    /*border-radius:5px;*/
    border-radius: 50%;
    /*圆角！*/
    transform: translate(-50%, -50%);
    /*margin-left:-45px;*/
    box-shadow: 0 0 12px #009dfd;
    animation: pulse 1.2s linear infinite;
    animation-delay: 0.8s;
}

.dian1{
    position: relative;
    width:10px;
    height:10px;
    border-radius:5px;
    background-color: dodgerblue;
    float: left;
    margin-top:420px;
    margin-left:530px;
}
.dian2{
    position: relative;
    width:10px;
    height:10px;
    border-radius:5px;
    background-color: dodgerblue;
    float: left;
    margin-top:495px;
    margin-left:895px;
}
.dian3{
    position: relative;
    width:10px;
    height:10px;
    border-radius:5px;
    background-color: dodgerblue;
    float: left;
    margin-top:-80px;
    margin-left:1075px;
}